{extend name="base" /} {block name="seo"}
<title>安全绑定 - {$site.name}</title>
<meta name="keywords" content="{$site.keywords}">
<meta name="description" content="{$site.description}">
{/block}
{block name="css"}
<link href="__HOME__/css/user.css" rel="stylesheet" type="text/css">
<style>
    .u-safe .safe-ul {
        margin-top: 15px;
    }

    .u-safe .safe-ul li {
        float: left;
        width: 47.5%;
        margin-bottom: 13px;
        position: relative;
    }

    .u-safe .safe-ul li:nth-child(2n) {
        margin-left: 5%;
    }

    .u-safe .safe-ul li a {
        display: block;
        padding: 25px;
        transition: 0.2s all;
        border-radius: 10px;
    }

    .u-safe .safe-ul li a:hover {
        background: #f9f9f9;
    }

    .u-safe .safe-ul li a img {
        float: left;
        width: 50px;
        height: 50px;
    }

    .u-safe .safe-ul li a div {
        float: right;
        width: calc(100% - 70px);
    }

    .u-safe .safe-ul li a div h3 {
        font-size: 16px;
        color: #333;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
    }

    .u-safe .safe-ul li a div h3 i {
        font-style: normal;
        font-size: 15px;
        height: 26px;
        line-height: 25px;
        border: 1px solid #e4e4e4;
        padding: 0px 9px;
        border-radius: 10px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 11px;
        color: #9e9e9e;
    }

    .u-safe .safe-ul li a div span {
        font-size: 15px;
        color: #333;
        height: 20px;
        margin-top: 10px;
        line-height: 20px;
        overflow: hidden;
        display: block;
        color: #9c9c9c;
    }
    a i {
        font-style: normal;
        padding: 0 0 0 3px;
    }

    .mails {
        width: 100%;
        height: 42px;
        background: #FFF;
        border: 1px solid #ececec;
        line-height: 42px;

        border-radius: 4px;
    }
</style>
{/block}
{block name="body"}
<div class="container">
    <div class="user">
        {include file="index/menu"}
        <div class="user-info user-box fl">
            <div class="title">
                安全绑定

            </div>
            <div class="u-safe">

                <ul class="safe-ul layui-clear">
                    {foreach name='appLoginArr' id='vo'}
                    <li>
                        <a href="javaScript:void(0);" class="layui-clear" data-type="{:$vo}" data-bindstatus="{:$bindStatus}">
                            <img src="__STATIC__/common/images/app_ico/{$vo}.png">
                            <div>
                                <h3>{:$apploginName[$vo]}</h3>
                                {if isset($list[$vo])}
                                <span data-name="{$list[$vo]}">已绑定：{$list[$vo]} <i>点击解绑</i></span>
                                {else /}
                                <span data-name="">未绑定 点击绑定</span>
                                {/if}
                            </div>
                        </a>
                    </li>
                    {/foreach}
                </ul>
                <ul class="safe-ul layui-clear" style="margin-top:20px;border-top:1px solid #F6F6F6;padding-top:20px;">
                    <li>
                        <a href="javaScript:void(0);" class="layui-clear" data-type="EMAIL" data-bindstatus="1">
                            <img src="//static.115z.com/img/mail.png">
                            <div>
                                <h3>邮箱号码</h3>
                                <?php $email=$userInfo['email']?substr_replace_ext($userInfo['email'], '*', 4, 4):''; ?>
                                <span data-name="{$email}">当前绑定：{$email|default='暂未绑定'}</span>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javaScript:void(0);" class="layui-clear" data-type="MOBILE" data-bindstatus="2">
                            <img src="//static.115z.com/img/phone.png">
                            <div class="mb_html">
                                <h3>手机账号</h3>
                                <?php $mobile=$userInfo['mobile']?substr_replace_ext($userInfo['mobile'], '*', 4, 4):''; ?>
                                <span data-name="{$mobile|default=''}">当前绑定：{$mobile|default='暂未绑定'}</span>
                            </div>
                        </a>
                    </li>
                </ul>



            </div>


        </div>
    </div>
</div>

{/block}
{block name="script"}
<script type="text/html" id="text_phone">
    <form class="layui-form " action="" id="phone_form">
        <div class="layui-form-item" id="phone_form1">
            <input type="text" class="mails phone_cv" name="object" placeholder=""/>
            <input type="hidden" name="object_type" value="">
        </div>
        <div class="layui-form-item" style="position: relative">
            <input type="text" class="mails sd_code" name="captcha" maxlength="4" placeholder="图片验证码"/>
            <img class="imgcode" src="{:url('user/login/captcha')}?'+Math.random();" title="点击可刷新验证码"
                 onclick="this.src='{:url('user/login/captcha')}?'+Math.random();"
                 style="position: absolute; width:140px;height: 42px; right: 1px; top: 1px;"/>
        </div>
        <div class="layui-form-item" style="position: relative">

            <input type="text" class="mails sd_dx_code" name="sms_code" maxlength="6" placeholder="收到的验证码"/>
            <a  class="layui-btn layui-btn-normal"
                    style="position: absolute; height: 42px; right: 0; top: 0; width: 106px;background-color: #ffffff; color: #0a0a0a; border: 1px solid #ececec;" id="send_code">发送验证码
            </a>
        </div>
    </form>
</script>
<script>
    layui.use(['layer'], function () {
        var layer = layui.layer;


        $(".safe-ul a").on("click", function (e) {
            if ($(this).find("div h3 i").length > 0) {
                layer.msg("该绑定方式已被暂时禁止。");
                return;
            }

            var that = $(this);
            var type = that.data("type");
            var name = that.find("div span").data("name");
            var object=mailOrPhone = that.find("h3").text();
            var bindstatus=that.data("bindstatus");
            var url=config.api.bind;
            if (type != "MOBILE"&&type!='EMAIL') {

                if(name=='') {

                            window.open("/bind/"+type+".html", "_blank");


                    return false;
                }else{
                    url=config.api.unbind_applogin;
                    mailOrPhone=(bindstatus==3?'邮箱或手机号':(bindstatus==2?'手机号':'邮箱'));
                }
            }


                var codeType='UNBIND_'+type;
                var title='解绑'+object;
                var msg='您当前绑定的为： <font color="#F30">' + name + '</font> 解绑后将无法使用该' + object + '登录';
                if (!name) {
                    //解绑
                    codeType='BIND_'+type;
                    title='绑定'+object;
                    msg='需要使用'+object+'接收验证码';
                }
                    alt(title, msg, function (e) {
                        alt(title, $("#text_phone").html(), function (e) {
                            var phone_form = $("#phone_form");
                            var data_val = phone_form.field();
                            var vf = phone_form.verify({
                                object: function (v, item) {
                                    var objectCheck;
                                    if (type == 'MOBILE') {
                                        objectCheck = v.isPhone();
                                    } else {
                                        objectCheck = v.isEmail();
                                    }
                                    if (!objectCheck) {
                                        layer.tips("请输入正确的" + object, item, {tips: 1});
                                        return 1
                                    }

                                },

                                sms_code: function (v, item) {
                                    if (v.length != 6) {
                                        layer.tips("请输入6位验证码", item, {tips: 1});
                                        return 1
                                    }
                                }
                            });
                            if (vf) {
                                data_val.type=codeType;
                                request({
                                    url: url,
                                    data:  data_val,
                                    success: function (res) {
                                        if(res.code == 1) {

                                            location.reload();

                                        } else {
                                            layer.tips(res.msg,'.sd_dx_code', {tips: 1});
                                        }

                                    }
                                })
                            }
                            // return false;
                        });
                        if ($("#phone_form").length) {
                            $("#phone_form").find("[name=object]").attr('placeholder', '请输入你的' + mailOrPhone);
                            $("#phone_form").find("[name=object_type]").val(bindstatus);
                        }
                        $("#send_code").timeOut({
                            send: function (send_cmd, send_val) {
                                var phone_form = $("#phone_form");
                                var data_val = phone_form.field();
                                var vf = phone_form.verify({
                                    object: function (v, item) {
                                        var objectCheck;
                                        if (type == 'MOBILE') {
                                            objectCheck = v.isPhone();
                                        } else {
                                            objectCheck = v.isEmail();
                                        }
                                        if (!objectCheck) {
                                            layer.tips("请输入正确的" + object, item, {tips: 1});
                                            return 1
                                        }

                                    },
                                    captcha: function (v, item) {
                                        if (v.length == 0) {
                                            layer.tips("请输入图形验证码", item, {tips: 1});
                                            return 1
                                        }
                                    }
                                })
                                if (vf) {
                                    data_val.type=codeType;
                                    request({
                                        url: config.api.send_code,
                                        data: data_val,
                                        success: function (res) {
                                            if (res.code == 1) {
                                                send_cmd();
                                                layer.tips(res.msg, '#send_code', {tips: 1});
                                            } else if (res.code == 3) {
                                                layer.tips(res.msg, '.phone_cv', {tips: 1});
                                            } else {
                                                layer.tips(res.msg, '.sd_code', {tips: 1});
                                            }
                                            if (res.code != 1) {
                                                $("input[name=captcha]").val("");
                                                $(".imgcode").trigger("click");
                                            }
                                        }
                                    })
                                }

                            }
                        });


                    }, ["确定", "取消"]);


            // }
        });

        /**
         *
         * @param title
         * @param content
         * @param call
         * @param btn
         * @param addClass
         */
        function alt(title, content, call, btn, addClass) {
            layer.open({
                type: 0,
                shadeClose: false,
                title: title || "提示",
                tipsMore: true,
                skin: 'atuikeLayerSkin1 ' + addClass || "",
                content: content || "",
                btn: btn || ["确定", "取消"],
                yes: function (e) {
                    call && call()
                }
            });
        }
    });
</script>
{/block}
